<template>
    <view class="empty-page">
        <CustNavBar
            v-if="isShowNavBar"
            :title="navBarTitle"
            :isShowLeft="navBarShowLeft"
            :bgColor="navBarBgColor"
            :color="navBarTextColor"></CustNavBar>
        <image
            :src="defaltIcon || img"
            alt=""
            :style="{
                width: imgWidth + 'rpx',
                height: imgHeight + 'rpx',
                'margin-top': offsetTop + 'rpx'
            }"
            class="empty-page__img" />
        <text class="empty-page__text">{{ defaultText || emptyText }}</text>
        <u-button
            v-if="isShowBtn"
            @click="goBack"
            color="#0069FF"
            text="返回"
            plain
            shape="circle"
            :customStyle="{ width: '320rpx', height: '76rpx', 'margin-top': '100rpx' }"></u-button>
    </view>
</template>

<script>
import CustNavBar from '@/components/navBar';
import EmptyIcon from '@/static/images/default/empty-icon.png';
import MessageIcon from '@/static/images/default/message-icon.png';
export default {
    name: 'emptyPage',
    emits: ['back'],
    components: {
        CustNavBar
    },
    props: {
        // 类型 empty ｜ message
        type: {
            type: String,
            default: 'empty'
        },
        offsetTop: {
            type: Number | String,
            default: 200
        },
        isShowNavBar: {
            type: Boolean,
            default: true
        },
        navBarTitle: {
            type: String,
            default: '运输平台'
        },
        navBarShowLeft: {
            type: Boolean,
            default: true
        },
        navBarBgColor: {
            type: String,
            default: '#fff'
        },
        navBarTextColor: {
            type: String,
            default: '#303133'
        },
        img: {
            type: String,
            default: EmptyIcon
        },
        imgWidth: {
            type: Number,
            default: 320
        },
        imgHeight: {
            type: Number,
            default: 320
        },
        emptyText: {
            type: String,
            default: '暂无数据~'
        },
        // 返回按钮
        isShowBtn: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            defaltIcon: '',
            defaultText: ''
        };
    },
    watch: {
        type: {
            handler(val) {
                let emptyText = null;
                let img = null;
                switch (val) {
                    case 'message':
                        img = MessageIcon;
                        emptyText = '暂无消息～';
                        break;
                    default:
                        img = EmptyIcon;
                        emptyText = '暂无数据~';
                        break;
                }
                this.defaultText = emptyText;
                this.defaltIcon = img;
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        /**
         * 返回上一页
         * */
        goBack() {
            uni.navigateBack(1);
            this.$emit('back');
        }
    }
};
</script>

<style lang="scss" scoped>
.empty-page__img {
    display: block;
    margin: 200rpx auto 0;
}

.empty-page__text {
    display: block;
    text-align: center;
    color: #606060;
    font-size: 28rpx;
}
</style>
